<!-- 网页布局 -->
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import AsideHeader from './components/aside-header.vue'
import Aside from './components/aside.vue'
import MainHeader from './components/main-header.vue'
import MainFooter from './components/main-footer.vue'

// 侧边宽度
const ASIDE_NUMBER = 201

const aside_width = ref(200)
const main_width = ref(700)
const isFull = computed(() => !aside_width.value)

onMounted(() => {
  main_width.value = window.innerWidth - (aside_width.value + 1)
  window.addEventListener('resize', () => {
    if (window.innerWidth < 750) {
      aside_width.value = 0
    } else {
      aside_width.value = ASIDE_NUMBER - 1
    }
    main_width.value = window.innerWidth - (aside_width.value + 1)
  })
})

const fullChange = () => {
  if (!!aside_width.value) {
    aside_width.value = 0
    main_width.value += ASIDE_NUMBER
  } else {
    aside_width.value = ASIDE_NUMBER
    main_width.value -= ASIDE_NUMBER
  }
}
</script>

<template>
  <div class="web-based-container">
    <div
      class="web-based-aside-container"
      :style="{ width: `${aside_width}px` }"
    >
      <AsideHeader />
      <Aside />
    </div>
    <div class="web-based-main-container" :style="{ width: `${main_width}px` }">
      <MainHeader :isFull="isFull" @fullChange="fullChange" />
      <div class="main-content">
        <RouterView />
      </div>
      <MainFooter />
    </div>
  </div>
</template>

<style scoped lang="scss">
@use './index.scss';
</style>
